<template>
  <!-- 文化古迹 -->
  <div class="cultural-container"  v-if="data.length"> 
    <div class="cultural-title"></div>
    <div class="cultural-swiper">
      <Swiper
        :modules="[$SwiperModules.Navigation]"
        :slides-per-view="3"
        :space-between="60"
        :loop="true"
        :centered-slides="true"
        :slide-to-clicked-slide="true"
        :navigation="{ nextEl: '.custom-next', prevEl: '.custom-prev' }"
        class="mySwiper"
        @swiper="onSwiper"
      >
        <SwiperSlide v-for="(slide, index) in processedData" :key="index">
          <div class="merge-main" @click="handleSlideClick(slide, index)">
            <img :src="slide.picUrl||mergeImage" alt="" class="merge-image"/>
            <div class="merge-title">{{slide.title}}</div>
          </div>
        </SwiperSlide>
      </Swiper>
      <div class="custom-prev"></div>
      <div class="custom-next"></div>
    </div>
  </div>
</template>
<script setup>
import mergeImage from '@/assets/images/mergeImage.png'
import { computed, ref  } from "vue";

const props = defineProps({
  data: {
    type: Array,
    default: () => [
      // 默认数据...
    ]
  },
})

// 使用 data 中的数据补充到至少5条
const processedData = computed(() => {
  if (props.data.length === 0) {
    return [];
  }
  
  // 如果数据不足5条，使用现有数据循环填充
  if (props.data.length < 5) {
    const result = [];
    for (let i = 0; i < 5; i++) {
      result.push(props.data[i % props.data.length]);
    }
    return result;
  }
  
  return props.data;
});
const swiperInstance = ref(null);

// 获取 Swiper 实例
const onSwiper = (swiper) => {
  swiperInstance.value = swiper;
};
// 处理幻灯片点击事件
const handleSlideClick = (slide, index) => {
  // 判断是否为中间活动幻灯片
  if (swiperInstance.value) {
    const activeIndex = swiperInstance.value.realIndex;
    if (index === activeIndex) {
      console.log("点击的是中间活动幻灯片");
      // 点击的是中间活动幻灯片，执行跳转
      if (slide.picUrl) {
        window.open(slide.picUrl, '_blank');
      }
    } else {
      // 点击的不是活动幻灯片，可以切换到该幻灯片
      swiperInstance.value.slideToLoop(index);
    }
  }
};

</script>
<style lang="scss" scoped>
  .cultural-container{
    height: 900px;
    background: url('@/assets/images/heritage.png') no-repeat center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    .cultural-title{
      align-self:flex-end;
      height: 125px;
      width: 1058px;
      background: url('@/assets/images/cultural-title.png');
    }
    .cultural-swiper {
      
      width: 1280px;
      position: relative;
      margin-top:87px;

      @media (max-width: 1280px) {
        overflow: hidden;
      }
      .mySwiper {
        height: 477px;
        
        .swiper-slide {
          display: flex;
          justify-content: center;
          align-items: center;
          transition: transform 0.3s ease;
         
          .merge-main{
            width: 285px;
            height: 213px;
            position: relative;
            cursor: pointer;
          }
          
          .merge-image{
            width: 285px;
            height: 213px;
          }
          .merge-title{
            position: absolute;
            width: 100%;
            height: 24px;
            background-color: rgba($color: #000000, $alpha: 0.5);
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            color: #fff;
            align-items: center;
            font-size: 9px;
            display: none;
          }
        }
  
        .swiper-slide-active {
          transform: scale(2);
          .merge-title{
            display: flex;
          }
        }
      }


    }
  }
</style>